<template>
  <div class="errorpage" id="bgstar" ref="bgstar" >
        <img :src="pic" alt="" class="mimg">
        <span
        v-for="(l,i) in spanNum" 
        :key="i"
        class="spandot"
        :style="{
          left:l.x+'px',
          top:l.y+'px',
          transform:'scale('+l.scaler+')',
          background:l.rgb,
          animationDelay:l.rate + 's'
        }"
      >
      </span>
  </div>
</template>
<script>
export default {
  name:"badservice",
  data(){
    return {
      pic:require('@/assets/images/503.png'),
      spanNum:[]
    }
  },
    methods:{
      spanInit(){
         var maxWidth = this.$refs.bgstar.clientWidth;
         var maxHeight = document.getElementById("bgstar").clientHeight;

         for(var i=0;i<520;i++){
          //  随机位置
           var x = Math.floor(Math.random()* maxWidth) ;
           var y = Math.floor(Math.random()* maxHeight) ;

          //  随机大小
          var scaler = Math.random() * 1.5;

          // 随机频率  S 
          var rate = Math.random() * 2.5 ;  

          // 随机的颜色
          var r = Math.floor(Math.random() * 255 );
          var g = Math.floor(Math.random() * 255 );
          var b = Math.floor(Math.random() * 255 );
          var opc = Math.random() * 1;

          this.spanNum.push({
            x,
            y,
            scaler,
            rate,
            rgba:`rgba(${r},${g},${b},${opc})`,
            rgb:`rgb(${r},${g},${b})`

          })
         }
         console.log(maxWidth,maxHeight)
      }
  },
  mounted(){
    this.spanInit();
  }
}
</script>

<style lang="scss">
.errorpage{
  width:100%;
  height:100%;
  background: #000;
  position: relative;
  .mimg{
    width:260px;
    height:280px;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
  }
  .spandot{
    position: absolute;
    z-index: 100;
    width: 4px;
    height:4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;

  }
   @keyframes flash {
        from{
            opacity: 0;
        }
        to{
            opacity: 0.5;
        }
    }
}
</style>
